<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- https://cdn.bootcdn.net/ajax/libs/pixi.js/8.12.0/pixi.js -->
    <script src="./assets/js/pixi_8.12.0.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #container{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 800px;
            height: 600px;
            border: 1px solid #ddd;


            canvas{
                height: 100%;
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div id="container"></div>
    <script>
        async function start(){
            const app = new PIXI.Application()

            await app.init({
                width: 800,
                height: 600,
                antialias: true,
                backgroundColor: "#fff",
                
            })
            document.getElementById("container").appendChild(app.canvas)

            const text = new PIXI.Text({
                text: "Hello World",
                style: {
                    fontSize: 60,
                    fill: "red",
                    align: "center",
                    fontWeight: 600
                },
                anchor: 0.5
            })

            text.x = app.view.width / 2;
            text.y = app.view.height / 2;

            app.stage.addChild(text)


            // logo 宽：81 高：32
            const logoTexture = await PIXI.Assets.load("./assets/svg/logo.svg")
            const logoSprite = new PIXI.Sprite({
                texture: logoTexture
            })

            logoSprite.anchor = 0.5;
            logoSprite.x = 400;
            logoSprite.y = 100;
            logoSprite.width = 81 * 3;
            logoSprite.height = 32 * 3;

            app.stage.addChild(logoSprite)

        }

        start()
        
    </script>
</body>
</html>